<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:05:13
 * @LastEditTime: 2021-07-03 21:51:56
 * @Description: 隔离点基本信息
 * @LastEditors: cqg
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <!-- <a href="http://localhost:8091/#/yq-personnel/register" target="_blank" rel="noopener noreferrer">asdf</a> -->
    <dataList placeholder="请输入隔离点名称" :pageInfo="pager" :listData="tableData" :menuList="['add']" searchName="hotelName" @menu-click="handleMenuClick" :filterList="filterList" :listLayout="[getPermissions('jdglhotelbaseinfo_add')?'menu':'']">
      <el-form v-show="formData.formFlag" ref="form" :model="formData" label-width="80px"  class="filter_con">
        <el-row>
          <el-col :span="5">
            <el-form-item label="隔离点名称">
              <el-input placeholder="请输入隔离点名称" v-model="formData.search" class="input-with-select">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
              <el-form-item label="隔离点类型">
                <el-select v-model="formData.glType" placeholder="请选择活动区域" @change="selectGlTypeFn">
                  <el-option :label="item.label" :value="item.value" v-for="(item,index) in formData.glTypeArr" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行政区划">
                <el-popover placement="bottom" width="400" trigger="click" v-model="delFlagVisibleAreadiog">
                  <el-tree class="filter-tree" :data="treeAreaData" lazy :load="loadNode" :props="defaultAreaProps" :filter-node-method="filterNode" :expand-on-click-node="false" @node-click="handleCheckChangeAreadiog" ref="tree"></el-tree>
                  <el-input
                    v-halfCharCode
                    slot="reference"
                    maxlength="30"
                    placeholder="请选择行政区域"
                    v-model="formData.hotelStreet"
                    :suffix-icon="
                        delFlagVisibleArea ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                      "
                    clearable
                  />
                </el-popover>
              </el-form-item>
            </el-col>
          <el-col :span="5">    
            <el-button type="primary" size="mini" @click="searchFn">搜索</el-button>
          </el-col>
         </el-row>
     
      </el-form>
      <el-table :data="tableData"  align="left" ref="multipleTable" @selection-change="$event => (selectDataArr = $event)" >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="hotelName" label="隔离点名称" width="240px"></el-table-column>
        <el-table-column prop="hotelStreet" label="所属区划"></el-table-column>
        <el-table-column prop="hotelType" label="隔离点类型" :formatter="dictFormate" width="230px"></el-table-column>
        <!--<el-table-column prop="hotelCode" label="隔离点编码"></el-table-column>-->
        <!--<el-table-column prop="fjs" label="房间总数"></el-table-column>-->
        <el-table-column prop="glfjzs" sortable label="隔离房间总数"></el-table-column>
        <el-table-column prop="glrs" sortable label="隔离人员房间总数"></el-table-column>
        <el-table-column prop="glrykyfjs" sortable label="隔离人员可用房间数"></el-table-column>
        <el-table-column prop="xsfjs" sortable label="待消杀房间数"></el-table-column>
        <el-table-column prop="yyfjs" sortable label="已使用房间数"></el-table-column>
        <el-table-column label="操作" fixed="right" class="operaColumn" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="getPermissions('jdglhotelbaseinfo_edit')" @click="handleBtnClick('edit',scope.row)">编辑</el-button>
            <!-- <el-button type="text" size="mini" @click="handleBtnClick('qcCode',scope.row)">二维码</el-button> -->
            <el-button type="text" size="mini" @click="handleBtnClick('room',scope.row)">房间</el-button>
            <el-button type="text" size="mini" v-if="getPermissions('jdglhotelbaseinfo_del')" @click="handleBtnClick('delete',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <vQrcode ref="vQrcode"></vQrcode>
    <!-- 新增|编辑|查看 -->
    <hotelDialog ref="hotelDialog" />
  </basic-container>
</template>
<script>
import { getDivision } from "@/admin/api/division";
import { pageAll, delObj, getAreaList } from "@/views/yq-hotel/api/baseInfo.js";
import hotelDialog from './dialog'
import { mapGetters } from "vuex"
export default {
  components: {
    hotelDialog,
  },
  provide () {
    return {
      //初始化数据
      initList: this.queryData,
    };
  },
  beforeMount () {
    this.queryData();
  },
  data () {
    return {
      delFlagVisibleArea: false,
      delFlagVisibleAreadiog: false,
      treeAreaData: [],
      defaultAreaProps: {
        children: "children",
        label: "divisionName",
      },
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      formData: {
        formFlag: true,
        // 搜索值
        search: '',
        glTypeArr: [],
        // 隔离类型值
        glType: '',
        areaFlag: false,
        areaTree: [],
        areaArr: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // 行政区值
        areaValue: '',
        // 行政区 id
        areaId: '',
        hotelStreet: ''
      }      
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    // 筛选项
    filterList () {
      return [
        { label: '隔离点类型', inputType: 'dict', dictName: 'hotel_type', name: 'hotelType'}
      ]
    },
  },
  mounted: function () {
    //this.getAreaFn()
    this.formData.glTypeArr = this.getDict('hotel_type')
  },
  methods: {
    async loadNode (node, resolve) {
      let data = [];
      const response = await getDivision({
        lazy: true,
        parentId: node.data.divisionCode ? node.data.divisionCode : "000000",
      });
      data = response.data.data;
      resolve(data);
    },
    handleCheckChangeAreadiog (data) {
      this.delFlagAreadiog = data.divisionCode;
      this.$set(this.formData, "hotelStreet", data.divisionName);
      this.$set(this.formData, "belongto", data.divisionCode);
      this.delFlagVisibleAreadiog = false;
      var option = {
        belongto: this.formData.belongto
      }
      this.queryData(option)
      // formData.belongto
    },
    // 部门过滤
    filterNode (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 数据请求
    queryData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      pageAll(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 搜索隔离酒店
    searchFn: function () {
        var option = {
          hotelName: this.formData.search
        }
        this.queryData(option)
    },
    // 选择隔离酒店类型
    selectGlTypeFn: function (val) {
        this.formData.glType = val
        var option = {
          hotelType: this.formData.glType
        }
        this.queryData(option)
    },
    filterAreaTree: function (data) {
      return data.map((item, index) => {
        if (item.children) {
            this.filterAreaTree(item.children)
            item.value = item.divisionCode
            item.label = item.divisionName
            return item
        }
      })
    },
    // 获得行政区数据
    getAreaFn (option) {
      var _this = this
      getAreaList(option).then((res) => {
        var areaArr = res.data.data
        _this.formData.areaTree = _this.filterAreaTree(areaArr)
      })
    },
    // 行政区域获得焦点
    areaFocusFn () {
      this.formData.areaFlag = true
    },
    //表格按钮点击事件监听
    handleBtnClick (type, row = {}) {
      switch (type) {
        case 'add'://新增
        case 'edit': //修改
          this.$refs.hotelDialog.show({
            type, data: JSON.parse(JSON.stringify(row))
          })
          break;
        case 'qcCode': //二维码
          this.$refs.vQrcode.show({ headText: `隔离点名称：${row.hotelName} `, footText: `隔离点编码：${row.hotelCode || '无数据'} `, text: '123' })
          break;
        case 'room': //房间
          this.$router.push({ name: 'room', query: { hotelBaseInfoId: row.hotelBaseInfoId } })
          break;
        case 'delete': //删除
          this.$confirm("此操作将永久删除该数据, 是否继续?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(async () => {
            try {
             let res =  await delObj([row.hotelBaseInfoId]);
             if(res.data.code == 0){
               this.$message.success("删除成功!")
                this.queryData({ current: 1 })
             }
            } catch (error) {
              this.$message.fail("删除失败!")
            }
          }).catch(() => {
            this.$message.info("已取消删除");
          });
          break;
      }
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case 'add':
          this.$refs.hotelDialog.show({ type: 'add' })
          break;
      }
    },
    dictFormate (row, column, cellValue) {
      //物业类型
      let dict;
      switch (column.property) {
        case 'hotelType':
          dict = this.getDict('hotel_type').find(p => p.value == cellValue)
          break;
      }
      if (dict) {
        return dict.label
      }
      return ''
    },
  },
};
</script>
<style>

</style>